<template>
  <div class="app">
    <h1>{{msg}}, 学生姓名是：{{studentName}}</h1>
    <!--  通过父组件给子组件传递函数类型的 props 实现：子给父传递数据  （第一种写法，使用 @ 或 v-on）  -->
    <School :getSchoolName="getSchoolName"/>

    <!--  通过父组件给子组件绑定一个自定义事件实现：子给父传递数据  （第一种写法，使用 @ 或 v-on:） -->
    <Student v-on:atguigu="getStudentName" @demo="m1"/>

    <!--  通过父组件给子组件绑定一个自定义事件实现：子给父传递数据  （第二种写法，使用 ref）  -->
    <Student ref="student" @click.native="show"/>
  </div>
</template>

<script>
import Student from "./components/Student"
import School from "./components/School"

export default {
  name: 'App',
  components: {Student, School},
  data() {
    return {
      msg: 'Hello World!',
      studentName: ''
    }
  },
  methods: {
    getSchoolName(name) {
      console.log('App收到了学校名', name)
    },
    getStudentName(name, ...params) {  // 使用可变参数接受
      console.log('demo 被调用了', name, params)
      this.studentName = name
    },
    m1() {
      console.log('demo 事件被触发了')
    },
    show() {
      alert(123)
    }
  },
  mounted() {
    // 手动获取到 student 的 vc 实例对象后再绑定自定义事件
    this.$refs.student.$on('atguigu', this.getStudentName)
  }
}
</script>

<style>
  .app {
    background-color: gray;
    padding: 5px;
  }
</style>